<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>APP</title>
		<link href="css/weui.min.css" rel="stylesheet" />
		<link href="css/jquery-weui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="css/flex.css" rel="stylesheet" />
		<link href="fonts/iconfont.css" rel="stylesheet" />
		<script src="js/immersed.js"></script>
	</head>
	<script>
		var subBarHeight = STATUSBAR_HEIGHT + 44, 
			height = STATUSBAR_HEIGHT + 44 + 35; 
		var styleObj = document.createElement('style');
		styleObj.type = 'text/css';
		styleObj.innerHTML = ".sub-bar{height:" + subBarHeight + "px}.category{top:" + subBarHeight + "px}.status-bar-height{height:" + height + "px}";
		document.getElementsByTagName('HEAD').item(0).appendChild(styleObj);
	</script>
	<style>
		body {
			background-color: #eee;
			padding: 0;
			margin: 0;
		}
		
		.main-body {}
		
		.time {
			float: right;
			font-size: 12px;
			color: #999;
			border-radius: 2px;
		}
		
		.sub-bar {
			background-color: #45a75c;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 1;
		}
		
		.sub-bar .logo {
			position: absolute;
			left: 8px;
			bottom: 10px;
			width: 100px;
		}
		
		.sub-bar .search-bar {
			position: absolute;
			left: 115px;
			right: 10px;
			bottom: 8px;
			border-radius: 20px;
			height: 26px;
			background: rgba(255, 255, 255, 1);
		}
		
		.sub-bar .search-bar i {
			display: block;
			height: 2px;
			width: 30px;
			text-align: center;
			line-height: 28px;
			color: #999;
			font-size: 18px;
		}
		
		.sub-bar .search-bar p {
			position: absolute;
			bottom: 2px;
			left: 50px;
			right: 50px;
			text-align: center;
			color: #999;
			font-size: 13px;
		}
		
		.category {
			position: fixed;
			left: 0;
			right: 0;
			background-color: #fff;
			height: 35px;
			z-index: 100;
			
		}
		
		.textslider {
			padding: 0 7px;
			width: 100%;
			white-space: nowrap;
			overflow: hidden;
			overflow-x: auto;
			overflow-y: hidden;
			-webkit-overflow-scrolling: touch;
		}
		
		.category .cate-name {
			margin-top: 2px;
			line-height: 31px;
			font-size: 13px;
			color: #777;
			padding: 0 8px;
			display: inline-block;
		}
		
		.category .cate-name.active {
			color: #45a75c;
			border-bottom: #04BE02 2px solid;
		}
		/*goods-item*/
		
		.goods-item {
			background-color: #fff;
			padding: 5px;
		}
		
		.goods-item .pics .img {
			width: 25%;
			display: block;
			float: left;
			padding: 2px;
		}
		
		.goods-item .pics .img img {
			width: 100%;
			display: block;
		}
		
		.goods-item .title {
			font-size: 16px;
			color: #000;
			padding: 0 2px;
		}
		
		.goods-item .brief {
			color: #777;
			font-size: 14px;
			padding: 0 2px;
		}
		
		.goods-item .price {
			color: #BD2C00
		}
		
		.goods-item .price span {
			font-size: 12px;
		}
		
		.goods-item .tools .time {
			color: #999;
			font-size: 12px;
		}
		
		.goods-item .jieyuan {
			position: absolute;
			right: 10px;
			top: 15px;
			width: 60px;
		}
	</style>

	<body>
		<div id="app">

			<div class="sub-bar">
				<img class="logo" src="images/logo.png">
				<div class="search-bar" onclick="clicked('goods_search.html')">
					<i class="iconfont icon-search"></i>
					<p>搜索更多宝贝</p>
				</div>
			</div>

			<div class="category line-bottom" ref="category">
				<div class="textslider">
					<a v-for="(vo,index) in category" class="cate-name" :class="{'active':vo.active}" @click="selectCategory(index)" v-html="vo.title">
						
					</a>
				</div>
			</div>

		</div>
		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.4.js"></script>
		<script src="js/jquery-weui.min.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/smarge.js"></script>
		<script src="js/imgload.js"></script>
		<script src="js/md5.min.js"></script>
		<script src="js/jquery.lazyload.js"></script>
		<script src="js/common.js"></script>

		<script type="text/javascript" charset="utf-8">
			mui.init();

			mui.plusReady(function() {
				
				var self = plus.webview.currentWebview();
	            var currentWebview = '';
	            var webviews = {};
				var styles = {top: STATUSBAR_HEIGHT + 44 + 35+'px',bottom: '0px',background:'transparent'} 
				var vm = new Vue({
					el: "#app",
					data: {
						category: Smarge.get('category'), 
					},
					mounted: function() {
						var vm = this;
						
						if(vm.category == undefined) {
							Get(SERVER_URL + "&c=Public&a=getConfig", {
								keys: 'CATEGORY_CONFIG'
							}, function(data) {
								vm.category = data.info.CATEGORY_CONFIG;
								Smarge.set('category', data.info.CATEGORY_CONFIG);
								vm.selectCategory(0)
							})
						}

						vm.category.map(function(v) {
							if(v.active) {
								vm.k = v.keyword;
								webviews[v.id] = plus.webview.create('goods_list.html',v.id,styles,{keyword:vm.k});
				        		self.append(webviews[v.id]);	
				        		plus.webview.show(webviews[v.id]);
				        		currentWebview = webviews[v.id]
							}
						})

					},
					methods: {
						selectCategory: function(index) {
							var vm = this;
							var w = vm.category[index]
							if (currentWebview.id == w.id) { return false; }
							if(webviews[w.id]==undefined){
								webviews[w.id] = plus.webview.create('goods_list.html',w.id,styles,{keyword:w.keyword});
				        		self.append(webviews[w.id]);	
				        		plus.webview.show(webviews[w.id]);
							}else{
								plus.webview.show(webviews[w.id]);
							}
							plus.webview.hide(currentWebview);
							currentWebview = webviews[w.id]
							
							vm.category.map(function(v) {
								if(v.id == w.id) {
									v.active = true;
									vm.k = v.keyword;
									vm.categroyBox = false;
								} else {
									v.active = false
								}
							})
							Smarge.set('category', vm.category)
						}
					}
				})

			});
		</script>
	</body>

</html>